<script setup lang="ts">
import type { CommentItem } from "@/types/detailTypes/detailTypes.ts";
import PreviewGood from "@/views/detail/components/tabs/components/Evaluate/previewGood.vue";

interface Props {
   commentList?: CommentItem[];
}

defineProps<Props>();


const renderProp = (orderInfo) => {
   return orderInfo.spces;
};

</script>

<template>
   <div class="list">
      <div class="item" v-for="(item) in commentList" :key="item.id">
         <div class="user">
            <img :src="item.member.avatar" alt="">
            <span>{{ item.member.nickname }}</span>
         </div>
         <div class="body">
            <div class="score">
               <el-rate v-model="item.score" disabled></el-rate>
               <span class="attr">{{ renderProp(item.orderInfo) }}</span>
            </div>
            <div class="text">{{ item.content }}</div>
            <preview-good v-if="item.pictures.length" :pictures="item.pictures"></preview-good>
            <div class="time">
               <span>{{ item.createTime }}</span>
               <span class="zan"><i class="iconfont icon-dianzan"></i>{{ item.praiseCount }}</span>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped lang="less">
.list {
   padding: 0 20px;

   .item {
      display: flex;
      padding: 25px 10px;
      border-bottom: 1px solid #f5f5f5;

      .user {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 130px;

         img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
         }

         span {
            padding-left: 10px;
            color: #666;
         }
      }

      .body {
         flex: 1;

         .score {
            line-height: 40px;

            .iconfont {
               color: #ff9240;
               padding-right: 3px;
            }

            .attr {
               padding-left: 10px;
               color: #666;
            }
         }
      }

      .text {
         color: #666;
         line-height: 24px;
      }

      .time {
         color: #999;
         display: flex;
         justify-content: space-between;
         margin-top: 5px;
      }
   }
}
</style>
